<!--
- Author:  LiShibin.
- Date:    2017/3/4.
- File:    index.vue.
-->
<template>
  <div>
    <div class="Web_Box">
      <!--<header class="xd ">-->
        <!--<div class="logo fl pl20" style="margin: 0">-->
          <!--<div class="pic"><img src="../assets/images/logo.png" alt=""/></div>-->
        <!--</div>-->
        <!--<div class="ShoppingCart fr pr20" @click="gotoNoticeList">-->
          <!--<i class="iconfont icon-message-copy"></i>-->
          <!--<p>消息</p>-->
        <!--</div>-->
      <!--</header>-->
      <div class="sb_top">
        <span class="select">{{curArea.city || ''}}</span>
        <span class="sb_search">
          <i class="iconfont icon-sousuo"></i>

          <input @click="goSearch" type="text" name="" placeholder="搜索你想要的表">
        </span>
        <i @click="gotoGoodsClassify" class="iconfont icon-fenlei"></i>
      </div>
      <mt-swipe :auto="4000" class="banner swiper-container">
        <mt-swipe-item class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
          <div class="swiper-slide">
            <img :src="$config.website + $config.adImgSrc + item.image_src" alt="" @click="gotoUrl(item.p_url)"/></div>
        </mt-swipe-item>
      </mt-swipe>
      <div class="sb_leibie">
        <ul>
          <li v-for="item in localClassify" @click="gotoLocation(item.location, item.page, item.param)">
            <span><i v-bind:class="item.icon" class="iconfont"></i></span>
            <p>{{item.name}}</p>
          </li>
        </ul>
      </div>
      <hot-news :list="noticeList"></hot-news>
      <div class="main">
        <h1 class="fenleibiaoti"> 热门二手表<span @click="gotoGoodsClassify" class="fenleibiaoti_right">查看全部<i class="iconfont icon-youjiantou-copy"></i></span></h1>
        <ul>
          <li @click="showBrandInfo(item.brand_id)" v-for="item in hotBrands">
            <div class="mingpai"><img :src="item.brand_pic"></div>
            <p>{{item.brand_name}}</p>
          </li>
        </ul>
      </div>
      <!--今日超值-->

      <div v-if="deserveGoods.length > 0" class="main">
        <h1 class="fenleibiaoti"> 今日超值</h1>

        <mt-swipe :auto="4000" class="banner swiper-container" style="height: 12.35rem;">
          <mt-swipe-item class="swiper-slide" v-for="(item,index) in deserveGoods" :key="index">
            <!--<div class="swiper-slide">-->
              <!--<img :src="$config.website + $config.adImgSrc + item.image_src" alt="" @click="gotoUrl(item.p_url)"/></div>-->
            <div  @click="gotoGoodsDetail(item.goods_id)">
              <div class="jinriphoto" style="text-align: center;height: 7rem"> <img :src="$config.website + '/test.php?sign=' + index + '&image=' + item.goods_image" style="width: auto;"></div>
              <p class="jinriname">{{item.goods_name}}</p>
              <p class="jinrijiage">
                <span class="fl">￥ {{item.goods_price}}</span>
                <span class="fl details polf"> <i class="iconfont icon-jiagedise-duan jiagediseicon2" style="display: inline"><span class="jiagedise2" style="text-align: center">淘只价</span></i></span>
                <p class="fr gjck" style="margin-right: 1rem;">公价参考：{{item.goods_marketprice}}</p>
              </p>
            </div>
          </mt-swipe-item>
        </mt-swipe>
      </div>

      <div v-if="PartnerGoodsData.length > 0" class="main">
        <h1 class="fenleibiaoti"> 淘只合伙人</h1>

        <mt-swipe :auto="4000" class="banner swiper-container" style="height: 12.35rem;">
          <mt-swipe-item class="swiper-slide" v-for="(item,index) in PartnerGoodsData" :key="index">
            <!--<div class="swiper-slide">-->
            <!--<img :src="$config.website + $config.adImgSrc + item.image_src" alt="" @click="gotoUrl(item.p_url)"/></div>-->
            <div  @click="gotoGoodsDetail(item.goods_id)">
              <div class="jinriphoto" style="text-align: center;height: 7rem"> <img :src="$config.website + '/test.php?sign=' + index + '&image=' + item.image" style="width: auto;"></div>
              <p class="jinriname">{{item.goods_name}}</p>
              <p class="jinrijiage">
                <span class="fl">￥ {{item.goods_price}}</span>
                <span class="fl details polf"> <i class="iconfont icon-jiagedise-duan jiagediseicon2" style="display: inline"><span class="jiagedise2" style="text-align: center">淘只价</span></i></span>
              <p class="fr gjck" style="margin-right: 1rem;">公价参考：{{item.goods_marketprice}}</p>
              </p>
            </div>
          </mt-swipe-item>
        </mt-swipe>
      </div>

      <!--猜你喜欢Start-->
    <div class="wkbg">
      <h1 class="fenleibiaoti">猜您喜欢</h1>
      <div class="cnxihuan2">
        <ul v-infinite-scroll="loadMoreHotGoods"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
          <li v-for="(item, i) in hotGoods.data" @click="gotoGoodsDetail(item.goods_commonid)">
            <div class="cnxihuan2_img  fl" style="text-align: center">
              <img :src="$config.website + '/test.php?image=' + item.goods_image + '&sign=' + i" alt="" style="height: 3.86rem;width: auto"/>
            </div>
            <div class="fl" style="width: 65%">
              <p class="cnxihuan2_p1">{{item.goods_name}}</p>
              <p class="cnxihuan2_p2">{{item.watch_brand}}/{{item.goods_series}}</p>
              <p class="cnxihuan2_p3"> <span class="fl">￥{{item.goods_price}}</span>
                <span class="fl details polf"> <i class="iconfont icon-jiagedise jiagediseicon2"></i>
                            <span class="jiagedise2">淘只价</span></span>
              </p>
              <p class="cnxihuan2_p4 gjck">参考公价：{{item.goods_marketprice}}</p>
              <p class="cnxihuan2_p5">
                <span>{{item.watch_sex}}</span>
                <span>{{item.watch_type}}</span>
                <span>{{item.watch_dialColor}}</span>
                <span>{{item.watch_degree}}新</span>
              </p>
            </div>
          </li>
        </ul>
        <loading-more :allLoaded="hotGoods.allLoaded" :show="hotGoods.data.length > 0"></loading-more>
        <empty-data :show="hotGoods.allLoaded && hotGoods.data.length <= 0" style="margin-top: 1.5rem"></empty-data>
      </div>
    </div>
    </div>
    <!--客服-->
    <div v-show="false" class="Customer_service"><a href=""><i class="iconfont icon-kefu1"></i></a></div>
    <!--下拉显示更多提示-->
    <!--<pull-more-promt :show="pullMoreShow"></pull-more-promt>-->
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import HotNews from '../components/hot-news.vue'
  import PullMorePromt from '../components/pullMoreNotice'
  import {Swipe, SwipeItem, MessageBox} from 'mint-ui'
  import {mapModules, mapRules} from 'vuet'
  //  import RegistCouponPop from '../components/registCoupon'

  export default {
    mixins: [
      mapModules({goodsClassList: 'goodsClassList'}),
      mapRules({once: 'goodsClassList'})
    ],
    data() {
      return {
        fromScan: this.$route.query.from_scan == 'true', // 扫码进来的
        bannerList: [],
        noticeList: [],
        newGoodsList: [],
        hotBrands: [], // 热门品牌
        deserveGoods: [], // 超值商品
        hotGoods: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 6, data: []},
        searchKeyword: '',
        pullMoreShow: false,
        couponModelShow: false,
        myCouponList: {requested: false, loading: false, allloaded: false, page: 1, pageSize: 5, data: []},
        couponModelTab: '1', // 1: 最优惠， 2： 快过期
        localClassify: [{name: '二手表', icon: 'icon-ershou1', location: '', page: 'goods-list', param: ''}, {name: '保卖表', icon: 'icon-baomaibiao1', location: '', page: 'goods-list', param: '1'}, {name: '分期买', icon: 'icon-fenqi', location: '', page: '', param: ''},
          {name: '回收', icon: 'icon-huishou', location: '', page: 'watch-recycling', param: ''}, {name: '一元拍卖', icon: 'icon-xinyongsumai1', location: 'http://454546g.store/rxauction/org/index.html?spm=a2129.7905538.shop.d_shop_into&from=auction&seller_id=2918895952&ttid=227200%40taobao_android_8.1.10&canal=wx&share=copy', page: '', param: ''}, {name: '手表维护', icon: 'icon-shoubiaoweibao1', location: '', page: 'watch-maintenance', param: ''},
          {name: '体验店', icon: 'icon-tiyandian1', location: '', page: 'union-experience', param: ''}, {name: '招商加盟', icon: 'icon-zhaoshangjiameng1', location: '', page: 'union-index', param: ''}],
        curArea: {},
        PartnerGoodsData: []
      }
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem,
      'hotNews': HotNews,
      'pullMorePromt': PullMorePromt
    },
    created() {
      this.getHotBrands(1, 12)
      this.getDeserveGoods(1, 3)
      // this.getMyCouponList(1, 100)
      this.getBannerList()
      this.getNoticeList()
      this.getNewGoodsList()
      this.getHotGoods(this.hotGoods.page, this.hotGoods.pageSize)
      // this.initWelcome()
      this.getLocation()
      this.getPartnerGoods()
    },
    mounted() {
//      RegistCouponPop()
    },
    computed: {
      // 可领的优惠券数
      // couponCount: function () {
      //   let count = 0
      //   for (let i = 0; i < this.couponList.data.length; i++) {
      //     if (this.couponList.data[i].get_num_limit == '0' || parseInt(this.couponList.data[i].get_num) < parseInt(this.couponList.data[i].get_num_limit)) {
      //       count++
      //     }
      //   }
      //   return count
      // },
      // // 可领的优惠券和优惠券礼包数
      // couponAllCount: function () {
      //   return this.couponCount + this.couponPackCount
      // }
    },
    methods: {
      getPartnerGoods() {
        this.$request.getPartnerGoods().then(data => {
          this.PartnerGoodsData = data
        }).catch(e => {
          console.log('数据获取失败')
        })
      },
      gotoLocation(location, page, param) {
        if (location == '') {
          if (page == '') {
            this.$toast('暂未开放')
            return
          } else {
            this.$router.push({name: page, params: {goods_command: param}})
          }
        } else {
          window.location = location
        }
      },
      switchCouponModelTab(value) {
        this.couponModelTab = value
        this.myCouponList = {requested: false, loading: false, allloaded: false, page: 1, pageSize: 5, data: []}
        this.getMyCouponList(1, 100)
      },
      switchCouponModelShow(boolValue) {
        if (boolValue) {
          this.$utils.addBodyFix()
        } else {
          this.$utils.removeBodyFix()
        }
        this.couponModelShow = boolValue
      },
      toggleRangeShow(coupon) {
        coupon.rangeShow = !coupon.rangeShow
      },
      gotoUseCoupon(item) {
        if (item.type == 'all_gc') {
          this.$router.push({name: 'goods-classify'})
        } else if (item.type == 'all_stc') {
          this.$router.push({name: 'goods-classify', query: {id: item.target_id}})
        } else if (item.type == 'goods') {
          this.$router.push({name: 'goods-detail', params: {id: item.target_id}})
        }
      },
      gotoCouponIndex() {
        this.$router.push({name: 'coupon-index'})
      },
      gotoUrl(url) {
        if (url == '') {
          return
        }
        if (url.indexOf(this.$config.website) != -1) {
          window.location.href = url // eslint-disable-line
        } else {
          this.$router.push({name: 'iframe', query: {url: url}})
        }
      },
      initWelcome() {
        if (this.$storage.getWelcomed()) { // 每次会话只显示一次
          return
        }
        this.$storage.setWelcomed(true)
        Promise.all([this.$request.getMemberName(), this.$request.getInviterInfo()]).then(response => {
          if (!response[0].member_mobile) { // mobile为空则为还未注册的新用户
            MessageBox.alert('新人专享可满减100元', {
              confirmButtonText: '前往注册'
            }).then(action => {
              this.$router.push({name: 'member-register'})
            }).catch(e => {
            })
            return
          }
          let userName = response[0] && response[0].member_name ? response[0].member_name : ''
          let inviterName = response[1] ? response[1] : ''
          let message = ''
          if (this.fromScan) { // 扫码进来的
            message = '<p>您的邀请人：' + inviterName + '</p><p style=" color:#000;">祝您购物愉快！</p>'
          } else {
            message = '<h3 style="height:40px; color:#000;">您好！' + userName + '</h3><p style=" color:#000;">欢迎进入商城，祝您购物愉快！</p>'
          }
          MessageBox.alert(message, {
            confirmButtonText: '好的'
          }).then(action => {
            this.pullMoreShow = true
            if (this.couponAllCount > 0) {
              MessageBox.confirm('当前有优惠券可以领取，是否前往领取？', {
                confirmButtonText: '前往领取'
              }).then(data => {
                this.$router.push({name: 'coupon-index'})
              }).catch(e => {
                this.switchCouponModelShow(true)
              })
            } else {
              this.switchCouponModelShow(true)
            }
          })
        }).catch(e => {
          console.error('获取用户信息或上级信息失败', e)
        })
      },
      getInviterInfo() {
        this.$request.getInviterInfo().then(data => {
          if (data) {
            this.inviter = data
          }
        }).catch(e => {
          console.error('获取邀请人失败', e)
        })
      },
      goSearch() {
        this.$router.push({name: 'search-search'})
      },
      showBrandInfo(id) {
        this.$router.push({name: 'goods-list', params: {brand_id: id}})
      },
      gotoNoticeList() {
        this.$router.push({name: 'notice-list'})
      },
      gotoGoodsClassify() {
        this.$router.push({name: 'goods-classify'})
      },
      gotoGoodsDetail(goodsCommonid) {
        this.$router.push({name: 'goods-detail', params: {id: goodsCommonid}})
      },
      getBannerList() {
        this.$request.getAdvList().then(data => {
          this.bannerList = data
        })
      },
      // 去除iframe字符串的宽高
      resetIframWH(html) {
        html = html.replace(/height=\d+/g, '')
        html = html.replace(/width=\d+/g, 'width="100%"')
        return html
      },
      getNoticeList() {
        this.$request.getNoticeList().then(data => {
          this.noticeList = data
        })
      },
      getNewGoodsList() {
        this.$request.getNewGoodsList().then(data => {
          this.newGoodsList = data
        })
      },
      getHotGoods(page, pageSize) {
        this.hotGoods.loading = true
        this.$request.getHotGoodsList(page, pageSize).then(data => {
          if (data.length < this.hotGoods.pageSize) {
            this.hotGoods.allLoaded = true
          }
          this.hotGoods.data = [...this.hotGoods.data, ...data]
        }).finally(() => {
          this.hotGoods.requested = true
          this.hotGoods.loading = false
        })
      },
      getDeserveGoods(page, pageSize) { // 超值商品
        this.hotGoods.loading = true
        this.$request.getDeserveGoods(page, pageSize).then(data => { // getDeserveGoods
          this.deserveGoods = [...this.deserveGoods, ...data]
        }).finally(() => {
        })
      },
      loadMoreHotGoods() {
        if (this.hotGoods.loading || this.hotGoods.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getHotGoods(++this.hotGoods.page, this.hotGoods.pageSize)
        }, 500)
      },
      searchGoods() {
        if (this.searchKeyword == '') {
          this.$toast('搜索关键字不能为空')
          return
        }
        this.$router.push({name: 'search-goods', query: {keyword: this.searchKeyword}})
      },
      getHotBrands(page, pageSize) {
        this.$request.getHotBrands(page, pageSize).then(data => {
          this.hotBrands = [...data]
        }).finally(() => {
          // this.couponList.requested = true
          // this.couponList.loading = false
        })
      },
      getMyCouponList(page, pageSize) {
        this.myCouponList.loading = true
        let params = {coupon_type: 0, cm_status: 0, store_id: 0, page: page, pageSize: pageSize, sortType: 1, desc: 1}
        this.$request.getMemberCouponList(params).then(data => {
          // if (data.length < this.myCouponList.pageSize) {
          this.myCouponList.allLoaded = true
          // }
          if (this.couponModelTab == '1') {
            data.sort(function (a, b) {
              return b['coupon_amount'] - a['coupon_amount'] // 金额降序
            })
          }
          if (this.couponModelTab == '2') {
            data.sort(function (a, b) {
              return a['end_time'] - b['end_time'] // 过期时间升序
            })
          }
          for (let i = 0; i < data.length; i++) {
            data[i].rangeShow = false
          }
          this.myCouponList.data = [...this.myCouponList.data, ...data]
        }).finally(() => {
          this.myCouponList.requested = true
          this.myCouponList.loading = false
        })
      },
      getLocation(cb) {
        var storageLocation = this.$storage.getLocationData()
        if (storageLocation) {
          this.curArea = storageLocation
          cb && cb(storageLocation.province)
        } else {
          this.$utils.getLocal().then(location => {
            console.log(location)
            this.curArea = location
            this.$storage.setLocation(location)
            cb && cb(location.province)
          })
        }
      }
    }
  }
</script>

<style>
  .sb_top{background-color: rgba(0,0,0,0.5);}
  .sb_top .sb_search input{vertical-align: top;}
  .sb_top .select {
    border: none;background: none;color: #fff;width: 17%;float: left;margin: 0.625rem 0;height: 1.25rem;line-height: 1.25rem;font-size: 14px;text-align: center;
  }
  .clear{clear:both;}
  .cnxihuan{padding-bottom: 20px;}
  .main ul li p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  .mint-swipe-indicators{bottom: -3px;}
</style>
